<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .head {
            height: 60px;
            background-color: #FFA500;
            text-align: center;
            line-height: 60px;
            margin-bottom: 15px;
        }

        .search {
            height: 80px;
            background-color: yellowgreen;
            text-align: center;
            line-height: 60px;
            color: white;
            margin-bottom: 15px;
            position: sticky;
            top: 0;
        }

        .lb {
            width: 960px;
            height: 640px;
            background-color: #EEEEEE;
            text-align: center;
            line-height: 60px;
            color: white;
            margin: 0 auto;
        }

        .lst{
            height: 500px;
            width: 960px;
            background-color: yellow;
            text-align: center;
            margin:  10px auto;
        }
    </style>
</head>
<body>

<!--

   position: sticky; 基于用户的滚动位置来定位。
  粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换

-->

<P class="head">
    网页的头部
</P>
<p class="search">
    <span>网页搜索区域,需要粘性定位</span>
    <input type="search" placeholder="请输入搜索关键词">
</p>
<p class="lb">
    网页的轮播区
</p>
<p class="lst">
    商品展示区
</p>
</body>
</html>